@import 'assets/stylesheets/gutenberg-base-styles';
@import 'assets/stylesheets/shared/mixins/placeholder'; // Contains the placeholder mixin
@import 'assets/stylesheets/shared/animation'; // Needed for the placeholder
@import '../../variables.scss';
@import '~@automattic/onboarding/styles/z-index';

$margin-left--gutenboarding__header-section-item: 13px; // matches design
$padding--gutenboarding__header: $grid-unit-10;

@keyframes gutenboarding_domain-slide-in {
	from {
		max-width: 0;
		opacity: 0;
	}

	79% {
		max-width: 0;
		opacity: 0;
	}

	80% {
		max-width: 0;
		opacity: 0.5;
	}

	to {
		max-width: 500px;
		opacity: 1;
	}
}

// Copied from https://github.com/WordPress/gutenberg/blob/8c0c7b7267473b5c197dd3052e9707f75f4e6448/packages/edit-widgets/src/components/header/style.scss
.gutenboarding__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid $light-gray-500;
	height: $onboarding-header-height;
	background: $white;
	z-index: onboarding-z-index( '.onboarding__header' );
	left: 0;
	right: 0;
	// Stick the toolbar to the top, because the admin bar is not fixed on mobile.
	top: 0;
	position: sticky;
	padding: $padding--gutenboarding__header;

	// On mobile the main content area has to scroll, otherwise you can invoke the overscroll bounce on the non-scrolling container.
	@include break-small {
		position: fixed;
	}
}

.gutenboarding__header-section {
	display: flex;
	width: 100%;
	align-items: center;
	font-size: $font-body-small;

	&--compact {
		.gutenboarding__header-domain-section,
		.gutenboarding__header-plan-section {
			visibility: hidden;
		}
	}
}

.gutenboarding__header-section-item {
	margin-left: $margin-left--gutenboarding__header-section-item;

	&--right {
		margin-left: auto;
	}
}

.gutenboarding__header-wp-logo {
	margin-left: 24px - $padding--gutenboarding__header -
		$margin-left--gutenboarding__header-section-item; // we want 24px exact on spec: ( 24 - header padding - own margin )
	color: var( --studio-black );
	display: flex;
}

.gutenboarding__header-site-title-section {
	display: none;

	@include break-mobile {
		display: block;
	}
}

.gutenboarding__header-domain-section {
	// Let this flex item take 100% of available width.
	flex-grow: 1;
	// Ensure flex item doesn't exceed 100% of th
	// available width, allowing content to have ellipsis.
	min-width: 0;
}

.gutenboarding__header-domain-picker-button-container.no-domain {
	animation-duration: 5s;
	animation-name: gutenboarding_domain-slide-in;
	max-width: 1500px;
	@include reduce-motion( 'animation' );
}

.gutenboarding__header-site-title-section {
	white-space: nowrap;
}
